<template>
  <div class="changePhone">
    <div class="changeheader">
      <p class="actived">修改手机号</p>
    </div>
    <div class="changecontent">
      <div>
        <div class="contentleft">手机号码 :</div>
        <div class="contentright">
            <el-input v-model="phone" placeholder="请输入手机号码"></el-input>
        </div>
      </div>
      <div>
        <div class="contentleft">短信验证码 :</div>
        <div class="contentright">
            <el-input v-model="smsCode" placeholder="请输入短信验证码" style="width:200px"></el-input>
            <button @click="sendcode">发送验码</button>
        </div>
      </div>
      <div>
        <div class="contentleft">新手机号码 :</div>
        <div class="contentright">
            <el-input v-model="new_phone" placeholder="请输入新手机号码"></el-input>
        </div>
      </div>
      <div>
        <div class="contentleft">确认手机号码 :</div>
        <div class="contentright">
            <el-input v-model="new_phone_confirmation" placeholder="请再次输入新手机号码"></el-input>
        </div>
      </div>
       <div>
          <el-button type="primary" style="margin:40px 71px 0 400px" @click="savephone">保存</el-button>
          <el-button style="margin:40px 71px 0 0">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {gettoken} from '@@/assets/commen.js'
export default {
  layout: "user",
  data() {
      return {
          phone:'',
          smsCode:'',
          new_phone:'',
          new_phone_confirmation:''
      }
  },
  methods: {
    sendcode(){
      this.$axios.get('/smsVerifCode',{params:{
        phone:this.phone,
        code_type:'savePhone'
      }})
    },
    savephone(){
      gettoken().then(val => {
        this.$axios.post('/savePhone',{
          phone:this.phone,
          smsCode:this.smsCode,
          new_phone:this.new_phone,
          new_phone_confirmation:this.new_phone_confirmation
        },{headers:{'Authorization':'Bearer'+val}}).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err.response)
      })
      })
    }
  },
};
</script>

<style scoped>
.changePhone {
  background-color: #fff;
}
.changeheader {
  height: 55px;
  border-bottom: 1px #d2d2d2 solid;
}
.changeheader p {
  width: 110px;
  height: 55px;
  font-size: 16px;
  line-height: 55px;
  margin-left: 15px;
  border-bottom: 2px #5141ed solid;
  text-align: center
}
.changecontent{
    padding-bottom: 50px;
}
.changecontent > div {
  margin-top: 30px;
  display: flex;
}
.changecontent div .contentleft {
  display: flex;
  width: 196px;
  margin-right: 19px;
  justify-content: flex-end;
}
</style>